<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_列表渲染</title>
</head>
<body>
<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(p, index) in persons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}
            ---<button @click="deleteP(index)">删除</button>
            ---<button @click="updateP(index, {name:'ZhangSan', age: 25})">更新</button>
        </li>
    </ul>
    <button >添加</button>

    <h2>测试: v-for 遍历对象</h2>

    <ul>
        <li v-for="(value, key) in persons[1]" :key="key">
            {{value}}---{{key}}
        </li>
    </ul>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        //vue本身只是监视了persons的改变，没监视数据内部的改变
        //vue重写了数组中的一系列改变数组内部的方法（先调用原生，更新界面）--->数组内部改变，界面变化
        data: {
            persons: [
                {name: 'Limi', age: 30},
                {name: 'Hamey', age: 29},
                {name: 'Kaysen', age: 1},
                {name: 'Kely', age: 1}
            ]
        },
        methods: {
            deleteP (index) {
                //删除person中指定的index的p
                this.persons.splice(index, 1);
            },
            updateP (index, newP) {
                //没有改变persons本身，数组内部发送了变化，但并没有调用变异方法，vue不会更新界面
                //this.persons[index] = newP
                this.persons.splice(index, 1, newP)
            }
        }
    })
</script>
</body>
</html>